<template>
  <div>
    <!-- user 登录页 -->
    <div class="content">
      <div class="box">
        <div class="logins">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="密保问题">
              <el-select v-model="form.problem" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="答案">
              <el-input v-model="form.answer"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary" @click="register" :loading="loading"
              >注册</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/login";
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
        email: "",
        phone: "",
        problem: "",
        answer: "",
      },
      loading: false,
      options: [
        {
          value: "哪里人",
          label: "哪里人",
        },
        {
          value: "出生日期",
          label: "出生日期",
        },
        {
          value: "大学名称",
          label: "大学名称",
        },
      ],
    };
  },
  methods: {
    register() {
      this.form.roles = "0";
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      const phonePattern = /^1[3-9]\d{9}$/;
      if (this.form.name == "") {
        this.$message({
          message: "用户名不能为空",
          type: "error",
        });
      } else if (this.form.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "error",
        });
      } else if (this.form.email == "") {
        this.$message({
          message: "邮箱不能为空",
          type: "error",
        });
      } else if (!emailPattern.test(this.form.email)) {
        this.$message({
          message: "请输入正确的邮箱格式",
          type: "error",
        });
      } else if (this.form.phone == "") {
        this.$message({
          message: "手机号不能为空",
          type: "error",
        });
      } else if (!phonePattern.test(this.form.phone)) {
        this.$message({
          message: "请输入正确的手机号格式",
          type: "error",
        });
      } else if (this.form.age == "") {
        this.$message({
          message: "年龄不能为空",
          type: "error",
        });
      } else if (this.form.problem == "") {
        this.$message({
          message: "密保问题不能为空",
          type: "error",
        });
      } else if (this.form.answer == "") {
        this.$message({
          message: "密保问题答案不能为空",
          type: "error",
        });
      } else {
        register(this.form).then((res) => {
          if (res.code == 200) {
            this.$router.push({ path: "/userLogin" });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url("../../assets/5.jpg"); /* 背景图片的路径 */
  background-size: cover; /* 使背景图片充满整个 div */
  background-position: center; /* 将背景图片居中 */
}
.logins {
  width: 20vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  width: 100%;
}
.btn .el-button {
  width: 60%;
  margin: 0 0 0 30%;
}
.box {
  width: 25vw;
  height: 60vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
</style>
